<template>
    <div>
        <div style="display: flex; flex-wrap: wrap">
            <a href="#empty" style="margin-right: 20px"><h1>空视图</h1></a>
            <a href="#wangeditor" style="margin-right: 20px"><h1>富文本</h1></a>
            <a href="#upload" style="margin-right: 20px"><h1>上传</h1></a>
            <a href="#echarts" style="margin-right: 20px"><h1>统计图</h1></a>
        </div>
        ---------------------------------------------

        <h3 id="empty">空视图</h3>
        <basic-container>
            <empty></empty>
        </basic-container>
        ---------------------------------------------

        <h3 id="wangeditor">富文本</h3>
        <basic-container>
            <wangeditor v-model:modelValue="wangeditor" :toolbarExcludeKeys="toolbarExcludeKeys"
                        style="height: 400px"></wangeditor>
            <el-button @click="getWangeditorValue">获取值</el-button>
        </basic-container>
        --------------------------------------------


        <h3 id="upload">上传</h3>
        <basic-container>
            <h5>文本类型（list-type="text"）</h5>
            <upload v-model:modelValue="upload"
                    list-type="text">
            </upload>
        </basic-container>
        <basic-container>
            <h5>Card类型（list-type="picture-card"）</h5>
            <upload v-model:modelValue="upload"
                    list-type="picture-card">
            </upload>
        </basic-container>
        --------------------------------------------

        <h3 id="echarts">统计图</h3>
        <basic-container>
            <div>
                <el-button @click="setChartType('line')">折线</el-button>
                <el-button @click="setChartType('bar')">柱状</el-button>
                <el-button @click="setChartType('pie')">饼状</el-button>
            </div>
            <div id="echartsDemo" style="width: 400px; height: 300px"></div>
        </basic-container>
        --------------------------------------------
    </div>
</template>

<script>
    import {mapGetters} from 'vuex';
    import {DemoChart} from "@/echarts/DemoChart"

    export default {
        name: 'baseDemo',
        data() {
            return {
                // 富文本 值
                wangeditor: "sdfsdf",
                // 富文本 需要去掉的功能项
                // 目前只支持初始化使用
                toolbarExcludeKeys: ["uploadAttachment"],

                // 上传
                upload: [{
                    id: "1",
                    name: "xxxx",
                    status: "success",
                    url: "https://static.javascriptc.com/site-common/images/qrcode_javascript.jpg"
                }, {
                    id: "2",
                    name: "xxxx2",
                    status: "success",
                    url: "https://static.javascriptc.com/site-common/images/qrcode_javascript.jpg"
                }],

                chartUtil: new DemoChart("echartsDemo")
            };
        },
        computed: {
            ...mapGetters(['userInfo']),
        },
        created() {
            // this.initEcharts();
            // this.createEcharts(data, 100);
        },
        mounted() {
            let chartsData = {
                "Mon": 150,
                "Tue": 230,
                "Wed": 224,
                "Thu": 218,
                "Fri": 135,
                "Sat": 147,
                "Sun": 260
            };
            this.$nextTick(()=> {
                this.initEcharts();
                this.createEcharts(chartsData);
            });
        },
        methods: {
            getWangeditorValue() {
                this.$message.success(this.wangeditor);
            },

            //---------------Echarts
            initEmpty(data) {
                this.chartUtil.isEmpty = !data || !data.length;
            },
            initEcharts() {
                this.chartUtil.init();
            },
            createEcharts(data) {
                this.chartUtil.create(data || []);
            },
            setChartType(type) {
                this.chartUtil.changeChartType(type);
            }
        },
    };
</script>

<style>
    .el-font-size {
        font-size: 14px;
    }
</style>
